<template>
	<view class="publish">
		<template v-if="percent!=100">
			<view>
				<progress stroke-width='3' :percent="percent" activeColor="#f08080"></progress>
			</view>
			<view class="tips">
				视频上传中，请耐心等待……
			</view>
			<view class="img">
				<image class="load" src="../../static/images/loading-4.gif"></image>
			</view>
		</template>
		<template v-else>
			<view class="bottom">
				<image mode="aspectFit" class="v-img" :src="cover"></image>
				<textarea class="title" placeholder="请输入标题" v-model="title"></textarea>
				<button class="btn" @click="publish">发布视频</button>
			</view>
		</template>
	</view>
</template>

<script setup>
	import {onLoad} from "@dcloudio/uni-app"
import { ref } from "vue";
	let serverUrl=getApp().globalData.severUrl
	let percent=ref(0)
	let cover=ref("../../static/images/test/pic1.jpg")
	let title =ref("")
	let file=null
	let videoUrl=""
	onLoad((option)=>{
		file =JSON.parse(option.file)
		let videoName=new Date().getTime()
		uniCloud.uploadFile({
			filePath:file.tempFilePath,
			cloudPath:videoName+"test.mp4",
			onUploadProgress(progressEvent){
				percent.value = Math.round(
					(progressEvent.loaded * 100) / progressEvent.total
				  );
			},
			success(result) {
				cover.value=result.fileID+"?x-oss-process=video/snapshot,t_1,f_jpg,ar_auto"
				videoUrl=result.fileID
			}
		})
	})
	const publish=()=>{
		uni.request({
			url:serverUrl+"/vlog/publish",
			header:{
				headerUserId:uni.getStorageSync("userId"),
				headerUserToken: uni.getStorageSync("userToken")
			},
			method:"POST",
			data:{
				  "cover": cover.value,
				  "height":file.height,
				  "title":title.value,
				  "url": videoUrl,
				  "vlogerId":uni.getStorageSync("userId"),
				  "width": file.width
			},
			success(res){
				if(res.data.status==200){
					uni.showToast({
						title:res.data.msg
					})
					uni.navigateBack()
				}else{
					uni.showToast({
						title:res.data.msg
					})
				}
			}
		})
	}
</script>

<style scoped lang="scss">
	       .publish{
			   .tips{
				   text-align: center;
				   margin-top: 60rpx;
			   }
			   .img{
				   display: flex;
				   justify-content: center;
			   }
			   .load{
				   width: 600rpx;
				   height: 600rpx;
			   }
			   .bottom{
				   padding:0 30rpx;
			   }
			   .v-img{
				   width: 300rpx;
				   height: 500rpx;
				   border-radius: 30rpx;
			   }
			   .title{
				   background-color: #111;
				   border-radius: 10rpx;
				   padding: 20rpx;
				   width: 100%;
				   box-sizing: border-box;
			   }
			   .btn{
				   background-color: #fe0000;
				   color:#fff;
				   margin-top: 30rpx;
			   }
		   }
</style>
